function insType() {
    $('#box').html(`
        <!-- /Page Header -->
        <div style="height:100px"></div>
        <div class="row">
          <div class="col-sm-12">
            <div class="card">
              <div class="card-body">
                <form onsubmit="return false" id="form1"  name="from" enctype="multipart/form-data">
                  <div class="row">
                    <div class="col-12">
                      <h5 class="form-title"><span>请输入类型</span></h5>
                    </div>
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <span style="display:inline-block;width: 200px"></span>
                        <label>类型</label>
                        <input type="text" name="type">
                      </div>
                    </div>
                    <div class="col-12">
                        <span style="display:inline-block;width: 200px"></span>
                      <button type="submit" class="btn btn-primary" onclick="insTypeDo()">添加</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    
    `)
}
function insTypeDo() {
    $.ajax({
        url:"/admin/insType",
        type:'post',
        datatype: 'text',
        data:$('#form1').serialize(),
        success:()=>{
            alert("添加成功")
            insType();
        },
        error:()=>{
            alert("添加失败")
            insType();
        }
    })
}
function typeList() {
    $.ajax({
        url: '/admin/typeList',
        type: 'get',
        datatype: 'json',
        success:function (res) {
            let str=``;
            for (let i=0;i<res.length;i++){
                str+=`
                    <tr>  
                        <td>${res[i].id}</td>
                        <td>${res[i].type}</td>
                        <td><input type="button" value="删除" onclick="removeType(${res[i].id})"></td>
                    </tr>
                `
            }
            $('#box').html(`
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

table, th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

tr:hover {
  background-color: #e9e9e9;
}

</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>类型</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    ${str}
  </tbody>
</table>

</body>
</html>
    `);
        }
    })
}
function removeType(id) {
    $.ajax({
        url:'/admin/delTypeById/'+id,
        type:'get',
        success:function () {
            typeList()
        }
    })
}